import './App.css'
import React, {useState} from "react";
import {MainLayout} from "./component/MainLayout.tsx";
import {GateRouteFeatureDefinitionsView, GateRouteStableDefinitionsView} from "./view/GateRoute.tsx";
import {Empty} from "antd";


const menus = ['routeStable' , 'routeFeature']



function selectView( { key } : {key : string} ) {
    switch ( key ) {
        case 'routeStable' :
            return <GateRouteStableDefinitionsView></GateRouteStableDefinitionsView>
        case 'routeFeature' :
            return <GateRouteFeatureDefinitionsView></GateRouteFeatureDefinitionsView>
        default:
            return <Empty></Empty>
    }
}


const CustomApp : React.FC = () =>  {
    const [ selectedKey , setSelectedKey  ] = useState('routeStable')
    return <>
        <MainLayout menus={ menus } defaultSelectedKey={selectedKey} onClickMenu={ (e)=> setSelectedKey(e) } >
            { selectView( { key : selectedKey } ) }
        </MainLayout>
    </>
}

export default CustomApp
